<template>
  <div class="home-container">
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <div class="welcome-info">
        <el-avatar :size="64" :src="data.user.avatar" />
        <div class="welcome-text">
          <h2>欢迎回来, {{ data.user.name }}</h2>
          <p>祝您今天工作顺利！</p>
        </div>
      </div>
      <div class="welcome-date">
        <div class="date-info">
          <span class="date">{{ currentDate }}</span>
          <span class="time">{{ currentTime }}</span>
        </div>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-grid">
      <div class="stat-card">
        <el-icon class="stat-icon"><School /></el-icon>
        <div class="stat-info">
          <div class="stat-value">{{ stats.courseCount }}</div>
          <div class="stat-label">总课程数</div>
        </div>
      </div>
      <div class="stat-card">
        <el-icon class="stat-icon"><User /></el-icon>
        <div class="stat-info">
          <div class="stat-value">{{ stats.studentCount }}</div>
          <div class="stat-label">选课学生</div>
        </div>
      </div>
      <div class="stat-card">
        <el-icon class="stat-icon"><Collection /></el-icon>
        <div class="stat-info">
          <div class="stat-value">{{ stats.noticeCount }}</div>
          <div class="stat-label">系统公告</div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-grid">
      <!-- 公告区域 -->
      <div class="notice-card">
        <div class="card-header">
          <h3>系统公告</h3>
          <el-button type="primary" text>查看全部</el-button>
        </div>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in data.noticeData"
            :key="index"
            :timestamp="item.time"
            :type="getTimelineItemType(index)"
          >
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- 项目信息区域 -->
      <div class="project-card">
        <div class="card-header">
          <h3>项目信息</h3>
        </div>
        <div class="project-info">
          <div class="info-item">
            <span class="label">项目名称：</span>
            <span class="value">学生选课管理系统</span>
          </div>
          <div class="info-item">
            <span class="label">技术栈：</span>
            <div class="tech-tags">
              <el-tag>Spring Boot 3</el-tag>
              <el-tag>Vue 3</el-tag>
              <el-tag>Element Plus</el-tag>
              <el-tag>MySQL</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  noticeData: []
})

const stats = reactive({
  courseCount: 0,
  studentCount: 0,
  noticeCount: 0
})

const currentDate = ref('')
const currentTime = ref('')

const updateDateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', { 
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getTimelineItemType = (index) => {
  const types = ['primary', 'success', 'warning', 'danger']
  return types[index % types.length]
}

const loadNotice = () => {
  request.get('/notice/selectAll').then(res => {
    if (res.code === '200') {
      data.noticeData = res.data
      stats.noticeCount = res.data.length
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 加载统计数据
const loadStats = async () => {
  try {
    // 获取课程总数
    const courseRes = await request.get('/course/selectAll')
    if (courseRes.code === '200') {
      stats.courseCount = courseRes.data.length
    }

    // 获取学生总数
    const studentRes = await request.get('/student/selectAll')
    if (studentRes.code === '200') {
      stats.studentCount = studentRes.data.length
    }

    // 获取公告数量（已在loadNotice中处理）
    const noticeRes = await request.get('/notice/selectAll')
    if (noticeRes.code === '200') {
      stats.noticeCount = noticeRes.data.length
      data.noticeData = noticeRes.data
    }
  } catch (error) {
    ElMessage.error('获取统计数据失败')
    console.error(error)
  }
}

onMounted(() => {
  loadStats() // 加载统计数据
  updateDateTime()
  setInterval(updateDateTime, 1000)
})
</script>

<style scoped>
.home-container {
  padding: 24px;
  background-color: #f6f8fa;
  min-height: calc(100vh - 60px);
}

.welcome-card {
  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.welcome-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.welcome-text h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.welcome-text p {
  margin: 8px 0 0;
  opacity: 0.8;
}

.welcome-date {
  text-align: right;
}

.date-info {
  display: flex;
  flex-direction: column;
}

.date {
  font-size: 16px;
  opacity: 0.9;
}

.time {
  font-size: 32px;
  font-weight: 500;
  margin-top: 4px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 32px;
  color: #1a237e;
  padding: 16px;
  background: rgba(26, 35, 126, 0.1);
  border-radius: 50%;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #1a237e;
  line-height: 1;
}

.stat-label {
  color: #666;
  margin-top: 4px;
}

.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.notice-card, .project-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1a237e;
}

:deep(.el-timeline-item__node) {
  background-color: #1a237e;
}

:deep(.el-timeline-item__content h4) {
  color: #1a237e;
  margin: 0 0 8px;
}

.project-info .info-item {
  margin-bottom: 16px;
}

.project-info .label {
  color: #666;
  margin-right: 8px;
}

.tech-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

:deep(.el-tag) {
  background-color: rgba(26, 35, 126, 0.1);
  color: #1a237e;
  border: none;
}

@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .welcome-card {
    flex-direction: column;
    text-align: center;
  }
  
  .welcome-date {
    margin-top: 16px;
    text-align: center;
  }
}
</style>